<template>
  <div class="user-box">
    <img
      class="head"
      src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ReJNwyR851ney_efDnzGVQHaHa?w=167&h=180&c=7&r=0&o=7&cb=12&dpr=1.5&pid=1.7&rm=3"
      alt=""
    />
    <div class="info">
      <div class="item">姓名:{{ user.name }}</div>
      <div class="item">电话:{{ user.phone }}</div>
    </div>
  </div>
</template>

<script>
export default {
  // 拦截：从该组件标签在使用时，通过自定义属性绑定的名称，获取传递的数据
  props: ["user"],
};
</script>

<style>
.user-box {
  display: inline-block;
  margin: 6px;
  overflow: hidden;
  width: 160px;
  height: 240px;
  border-radius: 8px;
  box-shadow: 0 0 6px 0 #999;
}
.user-box .head {
  width: 160px;
  height: 160px;
  overflow: hidden;
  /* 图片裁剪 */
  object-fit: cover;
}
.info {
  text-align: left;
}
</style>
